<template>
	<view class="cpntvideo ">
		<view class="videobox ">
			<video class="realvideo" :src="url" v-if="url" autoplay></video>
			<template v-else>
				<image :src="data.coverUrl" mode="aspectFill" class="cover"></image>
				<view class="controlbox">
					<view style="margin: 20rpx;">
						<text class="iconfont icon-bofang2"></text>
						<text>{{playtimes(data.playTime)}}</text>
					</view>
					<text class="iconfont icon-bofang1" style="align-self: center;font-size: 80rpx;" v-if="!loadtog" @tap="playvideo"></text>
					<text style="align-self: center;font-size: 60rpx;" v-else>加载中..</text>
					<view style="margin: 20rpx;">
						<text class="iconfont icon-ziyuanldpi"></text>
						<text>{{duration(data.durationms)}}</text>
					</view>
				</view>
			</template>
		</view>
		<text class="title text-bold text-cut" style="width: 80vw;">{{data.title}}</text>
		<view class="videoinfo">
			<view class="left">
				<image :src="data.creator.avatarUrl" class="sd"></image>
				<text class="text-bold text-cut" style="width: 35vw;">{{data.creator.nickname}}</text>
			</view>
			<view class="right">
				<view class="items text-gray">
					<text class="iconfont icon-zan" style="font-size: 45rpx;"></text>
					<text style="font-size: 24rpx;align-self: flex-start;">{{playtimes(data.praisedCount)}}</text>
				</view>
				<view class="items text-gray">
					<text class="iconfont icon-pinglun" style="font-size: 45rpx;"></text>
					<text style="font-size: 24rpx;align-self: flex-start;">{{playtimes(data.commentCount)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getvideourl
	} from '../../common/api.js'
	export default {
		props: ['data', 'index'],
		data() {
			return {
				loadtog: false,
				url: ''
			}
		},
		created() {

		},
		methods: {
			playvideo() {
				this.$store.commit('setplayingvideo', 'yjr' + this.data.vid)
				this.$store.commit('setcurrentindex', this.index)
				// #ifdef H5
				if (this.$store.state.h5audio) {
					this.$store.state.h5audio.destroy()
				}
				// #endif

				this.$emit('closeothers', this.data.vid)
				this.loadtog = true
				getvideourl(this.data.vid).then(res => {
					this.url = res.data.urls[0].url
				})
			},
			playtimes(e) {
				return e >= 100000 ? parseInt(e / 10000) + "万" : e
			},
			duration(e) {
				let min = parseInt(e / (60 * 1000))
				min = min >= 10 ? min : '0' + min
				let sec = parseInt(e / 1000) * 1 % 60
				sec = sec >= 10 ? sec : '0' + sec
				return min + " : " + sec
			}
		}
	}
</script>

<style lang="scss">
	.cpntvideo {
		//background: rgba($color: #f4eaf1, $alpha: 0.3);
		margin-bottom: 5rpx;
		padding-bottom: 10rpx;
		//border-radius: 15rpx;
		//overflow: hidden;

		.videoinfo {
			padding: 0 2vw;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				text {
					margin-left: 10rpx;
				}

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}
			}

			.right {
				display: flex;

				.items {
					display: flex;
					align-items: center;
					margin: 0 10rpx;
				}
			}
		}

		.title {
			margin: 15rpx 0 5rpx;
			font-size: 28rpx;
			text-indent: 14rpx;
			display: inline-block;
		}

		.videobox {
			border-radius: 10rpx;
			overflow: hidden;			

			.realvideo {
				width: 95vw;
				height: 40vw;
			}

			width: 95vw;
			height: 40vw;

			position: relative;


			.cover {
				width: 100%;
				height: 100%;
				position: absolute;
				filter: brightness(80%);
			}

			.controlbox {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 1;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				text {
					margin: 0 7rpx;
					color: rgba($color: #ffffff, $alpha: 0.95);
					font-size: 22rpx;
					display: inline-block;
				}
			}
		}
	}
</style>
